<template>
<div>
  <el-table
  :header-cell-style="tableHeaderStyle"
  :data="list"
  style="width: 100%"
  >
    <el-table-column
      label="试题编号"
      prop="number"
       width="120"
    >
    </el-table-column>
    <el-table-column
      label="学科"
      prop="subject"
      width="120"
    >
    </el-table-column>
    <el-table-column
      label="目录"
      prop="catalog"
      width="120"
    >
    </el-table-column>
    <el-table-column
      label="题型"
      width="120"
      prop="questionType"
    >
    <template slot-scope="{ row }">
      {{ showQuestionType(row.questionType) }}
    </template>
    </el-table-column>
    <el-table-column
      label="题干"
       width="200"
       prop="question"
    >
      <span slot-scope="{row}" v-html="row.question"></span>
    </el-table-column>
    <el-table-column
      label="录入时间"
      prop="addDate"
      width="200"
    >
    <template slot-scope="{ row }">
      {{ row.addDate | parseTimeByString }}
    </template>
    </el-table-column>
    <el-table-column
      label="难度"
      prop="difficulty"
      width="120"
    >
      <template slot-scope="{ row }">
        {{ showDifficulty(row.difficulty) }}
      </template>
    </el-table-column>
    <el-table-column
      label="录入人"
      prop="creator"
       width="120"
    >
    </el-table-column>
    <el-table-column
      label="审核状态"
      prop="chkState"
      width="120"
    >
    <template slot-scope="{ row }">
      {{ showChkType(row.chkState) }}
    </template>
    </el-table-column>
    <el-table-column
      label="审核意见"
      prop="chkRemarks"
       width="120"
    >
    </el-table-column>
    <el-table-column
      label="审核人"
      prop="chkUser"
       width="120"
    >
    </el-table-column>
    <el-table-column
      label="发布状态"
      prop="publishState"
      width="120"
    >
    <template slot-scope="{ row }">
      {{ showpublishType(row.publishState) }}
    </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="200">
      <template slot-scope="{ row }">
        <el-button type="text" size="small" @click="onView(row.id)">预览</el-button>
        <el-button
          type="text"
          size="small"
          :disabled="!!row.chkState"
          @click="onChecked(row.id)"
        >
          审核
        </el-button>
        <el-button
          type="text"
          size="small"
          :disabled="!!row.publishState"
          @click="onEdit(row.id)"
        >
          修改
        </el-button>
        <el-button
          type="text"
          size="small"
          @click="onRemove(row)"
        >
          {{ row.publishState?'下架':'上架' }}
        </el-button>
        <el-button
          type="text"
          size="small"
          :disabled="!!row.publishState"
          @click="onDelete(row.id)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 题目预览弹窗 -->
    <questions-preview v-model="previewVisible" ref="choicePreview"/>
  <!-- 题目预览弹窗/ -->

  <!-- 题目审核弹窗 -->
    <questions-check
      v-model="checkedVisible"
      :id="questionsId"
      ref="choiceChecked"
      @check-success="$emit('check-success')"
    />
  <!-- 题目审核弹窗/ -->
</div>
</template>
<script>
import { showQuestionType, showDifficulty, showChkType, showpublishType } from '@/filters/questions.js'
import QuestionsPreview from '../components/questions-preview.vue'
import QuestionsCheck from '../components/questions-check.vue'
import { choicePublish, removeRandoms } from '@/api/hmmm/questions.js'

export default {
  name: 'choice-table',
  components: { QuestionsPreview, QuestionsCheck },
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      previewVisible: false,
      checkedVisible: false,
      questionsId: 0
    }
  },

  created () {

  },

  methods: {
    showQuestionType,
    showDifficulty,
    showChkType,
    showpublishType,

    // 点击预览
    onView (id) {
      this.$refs.choicePreview.loadQuestionsDetails({ id })
      this.previewVisible = true
    },
    // 点击审核
    onChecked (id) {
      this.questionsId = id
      this.checkedVisible = true
    },
    // 点击修改
    onEdit (id) {
      this.$router.push({
        path: 'new',
        query: {
          id
        }
      })
    },
    // 点击上/下架
    onRemove (row) {
      const tip = row.publishState ? '下架' : '上架'
      const publishState = row.publishState ? 0 : 1
      this.$confirm(`您确定${tip}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await choicePublish({
          id: row.id,
          publishState
        })
        this.$message({
          type: 'success',
          message: `${tip}成功!`
        })
        this.$emit('pub-success')
      }).catch(() => {
      })
    },
    // 点击删除
    onDelete (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeRandoms({ id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.$emit('delete-success')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 表头高亮
    tableHeaderStyle ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#F5F7FA;color:#1f2d3d'
      } else {
        return ''
      }
    }

  }
}
</script>

<style scoped lang='scss'>

</style>
